<%@page import="java.awt.print.Printable"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<%
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragrma","no-cache");
response.setDateHeader("Expires",0);
%>
<title>_${customer.customerName}_推车拣选</title>
<script language="javascript" type="text/javascript" src="${ctx}/static/datepicker/WdatePicker.js"></script>
<script type="text/javascript">

  var curItemId='';
  var car_pick_flag=false;
  
  $(function() {
		$("#queryForm").validate(); 
		setCurTaskItem();
		var status='${task.status}';
		if(status=='11'){
		  car_pick_flag=true;
		  $("#sel_carCode").attr("disabled","disabled");
		}
		
  });
  
 function setCurTaskItem(){
      curItemId='';
	  $("[name='cur']").html('');
	  $("#tbody_taskItem").find('tr').css("background-color","");

	  $("#tbody_taskItem").find('tr').each(function(){
			var taskItemId=$(this).attr("name");
			var pickStatus=$("#pickStatus_"+taskItemId).attr("name");
			if(pickStatus!='picked'){
				
				$(this).css("background-color","#66CCFF");
				$("#pickStatus_"+taskItemId).html("拣货中...");
				
				curItemId=taskItemId;
				
                var cur_stockCode=$("#stockCode_"+curItemId).html();
                var cur_boxCode=$("#boxCode_"+curItemId).html();
                var cur_orderno=$("#orderno_"+curItemId).html();
                var cur_sku=$("#sku_"+curItemId).html();
                var cur_num=$("#num_"+curItemId).html();
                var cur_pickedNum=$("#pickedNum_"+curItemId).html();
                var cur_pickStatus=$("#pickStatus_"+curItemId).html();
                
                $("#cur_stockCode").html(cur_stockCode);
                $("#cur_boxCode").html(cur_boxCode);
                $("#cur_orderno").html(cur_orderno);
                $("#cur_sku").html(cur_sku);
                $("#cur_num").html(cur_num);
                $("#cur_pickedNum").html(cur_pickedNum);
                $("#cur_pickStatus").html(cur_pickStatus);
				$("#txt_sku").focus();
				
				return false;
			}
	  });
  }
  
  function keydown(){
      $("#message").html('');
  }
 
  //绑定拣货车
  function ajaxBindCar(){
	  
	  $("#stockInfo").html('');
	  $("#car_msg").html('');
	  var carCode=$("#sel_carCode").val();
	  if(carCode==''){
	    return;
	  }
	  
	  $.ajax({
			type : 'post',
			url : '${ctx}/carPickTask/ajaxBindCar',
			data : {
				carCode:carCode,
				taskCode:'${task.taskCode}'
			},
			dataType : 'json',
			success : function(data) {
			
			   var status=data.status;
			   
			   if(status=='0'){
			      $("#car_msg").css("color","red");
			      $("#car_msg").html("使用中，请选择其他拣选车!");
			   }else if(status=='4'){
			       $("#car_msg").css("color","red");
			      $("#car_msg").html("车位数不能满足此任务,请选择其他拣选车!");
			   }else if(status=='1'){
			      $("#car_msg").css("color","green");
			      $("#car_msg").html("成功绑定拣选车!");
			      car_pick_flag=true;
			      $("#sel_carCode").attr("disabled","disabled");
			      
			      var pickCar=data.pickCar;
			      
			      var stockList = data.stockList;
				  var str="";
				  $.each(stockList, function(i) {
					    var stock=stockList[i];
					    str +="<tr name='tr_stock' >";
					    str += "<td id='stockCode_"+stock.stockCode+"'>"+stock.stockCode+"</td>";
						str += "<td id='stockName_"+stock.stockCode+"'>" +stock.stockName+ "</td>";
						
						var status=stock.status;
						if(status=='free'){
						  str += "<td name='status' id='"+stock.stockCode+"'>空置中</td>";
						}else if(status=='busy'){
						  str += "<td name='status' id='"+stock.stockCode+"'>使用中</td>";
						}
						str += "<td name='orderno' id='orderno_"+stock.stockCode+"'></td>";
						str += "<td id='goodsNum_"+stock.stockCode+"'></td>";
						str += "<td id='goodsInfo_"+stock.stockCode+"'></td>";
						
						str +="</tr>";
					});
					
					$("#stockInfo").html(str);
					$("#txt_orderno").focus();
					
					//写入订单数据
					var orderList=data.orderList;
					$.each(orderList,function(i,order){
						 $("[name='status']").each(function(){
				    		 var status=$(this).html();
				    		 if(status=='空置中'){
				               var stockCode=(i+1);
				               $("#orderno_"+stockCode).html(order.order.ordeno); 
				               
				               var goodsNum=0;
				               var goodsInfo='';
				               $.each(order.order.orderItems,function(j,orderItem){
				            	   goodsNum+=orderItem.qty;
				            	   goodsInfo+=orderItem.sku+"_"+orderItem.qty+";"
				               });
				               
				               $("#goodsNum_"+stockCode).html(goodsNum);
				               $("#goodsInfo_"+stockCode).html(goodsInfo);
				               $(this).html("使用中");
				               return false;
				    		 }
				    	 });
					 }); 
			      
			   }
			   
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
		}); 
		
  }
  
    //拣货、上车
	function pick(){
	   var sku=$("#txt_sku").val().trim();
	   var taskId='${task.id}';
	   var carCode=$("#sel_carCode").val();
	   
	   //检查是否选择拣选车
	   if(car_pick_flag==false){
		   alert("请选择拣选车。");
		   $("#txt_sku").val("");
		   $("#sel_carCode").focus();
		   return;
	   }
	   
	   $.ajax({
			type:'post',
			url:'${ctx}/carPickTask/ajaxPickAndSetGooods',
			data:{
				carCode:carCode,
				taskId:taskId,
				taskItemId:curItemId,
				sku:sku
			},
			dataType:'json',
			success:function(data) {
				
				//拣货
                var msg_pick=data.msg_pick;
                var stockCode=data.stockCode;
				
				if(msg_pick=='continue'){
					flag=true;
					var _num=$("#cur_pickedNum").html();
					$("#cur_pickedNum").html(Number(_num)+1);
					$("#pickedNum_"+curItemId).html(Number(_num)+1);
					
					$("#message").css("color","green");
				    $("#message").html("请放入第"+stockCode+"号位。");
				}
				else if(msg_pick=='finishing'){
					flag=true;
        			var _num=$("#cur_pickedNum").html();
					$("#cur_pickedNum").html(Number(_num)+1);
					$("#pickedNum_"+curItemId).html(Number(_num)+1);
					$("#pickStatus_"+curItemId).attr("name","picked");
					$("#pickStatus_"+curItemId).html("已拣货");
					
					$("#message").css("color","green");
				    $("#message").html("请放入第"+stockCode+"号位。(此任务项已完成，继续下一个任务项)");
				    
					setCurTaskItem();
				}
				else if(msg_pick=='finished'){
				    $("#message").css("color","red");
					$("#message").html("此任务项已完成");
				}
				else if(msg_pick=='task_finishing'){
					flag=true;
					$("#pickStatus_"+curItemId).attr("name","picked");
					$("#pickStatus_"+curItemId).html("已拣货");
					setCurTaskItem();
					$("#message").css("color","green");
				    $("#message").html("请放入第"+stockCode+"号位。");
				    
				    window.alert("此任务已经全部完成！请按“确定”继续。"); 
					location.href='${ctx}/pickTask/v2_toPickTaskListPage';
				}
				else if(msg_pick=='error'){
				    $("#message").css("color","red");
					$("#message").html("验证不通过");
				}
				
				if(flag=true){
				  $("#sel_carCode").attr("disabled","disabled");
				}
				
				$("#txt_sku").val('');
				$("#txt_sku").focus();
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
	   
    	 
    	 
	}
    
</script>
</head>

<body>

<section class="content">
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">当前任务项（${task.batchCode}-${task.taskCode}）</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				
	<!-- 条码扫描区 -->
	<table class="table table-striped table-bordered table-condensed" style="margin-top: 0px;">
<!-- 		<thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="7" bgcolor="#8EB4CB">当前任务项</th> -->
<!-- 		</thead> -->
		
		 <thead><tr>
			    <th width="80">库位编号</th>
			    <th style="width: 120px;">箱子编号</th>
			    <th style="width: 180px;">订单编号</th>
			    <th style="width: 120px;">SKU编号</th>
			    <th style="width: 120px;">待拣数量</th>
			    <th style="width: 120px;">已拣数量</th>
			    <th>状态</th>
		 </tr></thead>
			
	      <tr id="tr_curTaskItem" height="50px;">
				   <td id="cur_stockCode" name="cur"></td>
				   <td id="cur_boxCode" name="cur"></td>
				   <td id="cur_orderno" name="cur"></td>
				   <td id="cur_sku" name="cur"></td>
				   <td id="cur_num" name="cur"></td>
				   <td id="cur_pickedNum" name="cur"></td>
				   <td id="cur_pickStatus" name="cur"></td>
		  </tr>
			
	      <tr>
	        <td style="width: 120px; font-weight: bold; vertical-align: middle;">选择拣选车：</td>
		    <td  style="width: 120px;">
		       <c:if test="${task.status eq '2' }">
				  <select  name="sel_carCode"  id="sel_carCode" class="input-medium" onchange="ajaxBindCar();">
					 <option value=""></option>
					 <c:forEach items="${pickCarList}" var="car">
						<option value="${car.carCode}" >${car.carName}</option>
					 </c:forEach>
				  </select>
				</c:if>
				
				<c:if test="${task.status eq '11' }">
				  <select  name="sel_carCode"  id="sel_carCode" class="input-medium">
						<option value="${curPickCar.carCode}"  selected="selected" >${curPickCar.carName}</option>
				  </select>
				</c:if>
				
				<c:if test="${task.status ne '11' and task.status ne '2'}">
				   <select  name="sel_carCode"  id="sel_carCode" class="input-medium" disabled="disabled"></select>
				</c:if>
		    </td>
		    
		    <td colspan="1" style="vertical-align: middle;">
	          <span id="car_msg" style="color: red; margin-left: 10px;"></span>
	      </td>
	     
	      <td style="width: 120px;font-weight: bold;vertical-align: middle;">扫描SKU编码：</td>
	      <td style="vertical-align: middle; width: 100px;" >
              <input type="text" id="txt_sku" onchange="pick();"  onkeydown="keydown();"/> 
	      </td>
	      <td colspan="3" style="vertical-align: middle;">
	        <span style="margin-left:12px; margin-top: 10px; color: red;font-weight: bold;" id="message"></span>
	      </td>
	   </tr>
	</table>
	</div></div></div></div>
	
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">拣货任务项 </h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
				
	<!-- 拣货任务项 -->
	<table class="table  table-bordered " style="margin-top: 0px;">
<!-- 		<thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">拣货任务项 </th> -->
<!-- 		</thead> -->
		<thead><tr>
		        <th width="80">序号</th>  
			    <th>库位编号</th>
			    <th>箱子编号</th>
			    <th>订单编号</th>
			    <th>SKU编号</th>
			    <th>待拣数量</th>
			    <th>已拣数量</th>
			    <th>状态</th>
			</tr></thead>
			
			<tbody id="tbody_taskItem">
			<c:forEach items="${taskItemList}" var="item" varStatus="i">
			    <tr id="tr_${item.id}" name="${item.id}" >
				   <td>${i.count}</td>
				   <td id="stockCode_${item.id}">${item.stockCode}</td>
				   <td id="boxCode_${item.id}">${item.boxCode}</td>
				   <td id="orderno_${item.id}">${item.orderno}</td>
				   <td id="sku_${item.id}">${item.sku}</td>
				   <td id="num_${item.id}">${item.num}</td>
				   <td id="pickedNum_${item.id}">${item.pickedNum}</td>
				   <td id="pickStatus_${item.id}" name="${item.pickStatus}">
				     <c:if test="${item.pickStatus eq 'unpicked'}">待拣货</c:if>
				     <c:if test="${item.pickStatus eq 'picking'}">拣货中</c:if>
				     <c:if test="${item.pickStatus eq 'picked'}">已拣货</c:if>
				   </td>
				</tr>
			</c:forEach>
			</tbody>
			
	</table>
	</div></div></div></div>
	
	
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-edit"></i>
					<h3 class="box-title">拣选车信息</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
	
	<!-- 拣选车信息 -->
	<table id="contentTable" class="table table-bordered table-condensed">
<!-- 	    <thead> -->
<!-- 			<th style="vertical-align: middle; color: white; " colspan="11" bgcolor="#8EB4CB">拣选车信息</th> -->
<!-- 		</thead> -->
		<thead><tr>
			    <th style="width: 150px;">架位编号</th>
			    <th style="width: 150px;">架位名称</th>
			    <th style="width: 150px;">状态</th>
			    <th style="width: 150px;">订单号</th>
			    <th style="width: 150px;">商品数量</th>
			    <th>商品信息</th>
			</tr></thead>
		<tbody id="stockInfo">
		   <c:if test="${task.status eq '11' }">
		      <c:forEach items="${curStockList}" var="s" varStatus="i">
				<tr name='tr_stock' >
				   <td id="stockCode_${s.stockCode}">${s.stockCode}</td>
				   <td id="stockName_${s.stockCode}">${s.stockName}</td>
				   <td id="${s.stockCode}" name="status" >
				     <c:if test="${s.status eq 'free' }">空置中</c:if>
				     <c:if test="${s.status eq 'busy' }"><font color=blue>使用中</font></c:if>
				   </td>
				   <td id="orderno_${s.stockCode}" name="orderno">${s.orderno}</td>
				   <td id="goodsNum_${s.stockCode}" >${s.goodsNum}</td>
				   <td id="goodsInfo_${s.stockCode}" >${s.goodsInfo}</td>
				</tr>
			</c:forEach>
		   </c:if>
		</tbody>
	</table>
	</div></div></div></div>
</section>
	
<%--	<table id="contentTable" class="table table-striped table-bordered table-condensed">--%>
<%--	    <thead>--%>
<%--			<th style="vertical-align: middle; color: white; " colspan="11" bgcolor="#8EB4CB">订单信息</th>--%>
<%--		</thead>--%>
<%--		<thead><tr>--%>
<%--			    <th style="width: 150px;">序号</th>--%>
<%--			    <th style="width: 150px;">订单编号</th>--%>
<%--			    <th>商品信息</th>--%>
<%--			</tr></thead>--%>
<%--		<tbody>--%>
<%--		<c:forEach items="${orderList}" var="o" varStatus="i">--%>
<%--			<tr id="tr_${o.order.ordeno}" name="_orderno">--%>
<%--			   <td>${i.count}</td>--%>
<%--			   <td id="_orderno_${o.order.ordeno}">${o.order.ordeno}</td>--%>
<%--			   <td id="_goodsInfo_${o.order.ordeno}">--%>
<%--			      <c:forEach items="${o.order.orderItems}" var="orderItem" varStatus="j">${orderItem.sku}_${orderItem.qty};</c:forEach>--%>
<%--			   </td>--%>
<%--			</tr>--%>
<%--		</c:forEach>--%>
<%--		</tbody>--%>
<%--	</table>--%>
<%--	--%>
</body>
</html>
